<template>
  <div class="content">
    <el-form ref="form" :model="form" label-width="80px" :inline="true">
      <el-button type="primary" size="mini" class="btn" style="margin-right: 40px">新增卡类</el-button>
      <el-form-item>
        <el-input v-model="form.name" size="mini" placeholder="请输入卡类名称"></el-input>
      </el-form-item>
      <el-button type="primary" size="mini" class="btn"><i class="fa fa-search" style="margin-right:5px;"></i>查询</el-button>
    </el-form>

    <!-- <el-divider></el-divider> -->

    <template>
      <el-table
        :data="tableData"
        size="mini"
        border
        style="width: 100%">
        <el-table-column
          prop="date"
          label="卡类ID"
          width="150">
        </el-table-column>
        <el-table-column
          prop="name"
          label="卡类名称">
        </el-table-column>

        <el-table-column
          prop="name"
          label="卡类编号（随机生成）">
        </el-table-column>

        <el-table-column
          prop="name"
          label="是否默认">
        </el-table-column>

        <el-table-column
          prop="name"
          label="卡押金">
        </el-table-column>

        <el-table-column
          prop="name"
          label="发卡工本费">
        </el-table-column>


        <el-table-column
          prop="name"
          label="补卡工本费">
        </el-table-column>

        <el-table-column
          prop="name"
          label="挂失工本费">
        </el-table-column>

        <el-table-column
          fixed="right"
          :label="$t('action.operation')"
          width="250">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="showEdit=true">{{$t('action.edit')}}</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">{{$t('action.delete')}}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <!--新增编辑弹框-->
    <el-dialog title="创建卡类" :visible.sync="showEdit" width="40%" v-dialogDrag>
      <edit></edit>
    </el-dialog>
  </div>
</template>

<script>
    import edit from "@/components/CardTypeManagement/edit";

    export default {
        name: "editCanteen",
        components: {
            edit
        },
        data() {
            return {
                showEdit: false,//显示编辑弹框
                form: {
                    name: '',
                },
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 200333
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1517 弄',
                    zip: 200333
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1519 弄',
                    zip: 200333
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1516 弄',
                    zip: 200333
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1516 弄',
                    zip: 200333
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1516 弄',
                    zip: 200333
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1516 弄',
                    zip: 200333
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1516 弄',
                    zip: 200333
                }]
            }
        },
        mounted() {
            console.log(this.$t('action'))
        },
        methods: {
            handleClick(row) {
                console.log(row);
            },
        }
    }
</script>

<style scoped lang="scss">
  .table_btn{
    background: #eee;
    color: #7b9dda;
    border: none;
    outline: none;
    padding: 4px 10px;
    margin-bottom: 5px;
    border-radius: 5px;
  }
  .button_list {
    margin-bottom: 10px;
  }

  .content {
    text-align: left;
  }

  .el-divider {
    margin: 10px 0;
  }

  .btn {
    margin-top: 7px;
  }

  .el-form-item {
    margin-bottom: 0;
  }
</style>
